<template>
	<div class="dropdown" ref="container">
		<div class="select" :class="{clicked:show}"  @click.stop="clicked">
			<span>{{selectedItem.name}}条/页</span>
			<i :show="show" class="zh-icon-down_3 zh-iconfont icon"></i>
		</div>
		<ul :class="{shows:show}" ref="list" :direction="direction">
			<li :class="{selected:selectedItem.value===item.value}" v-for="(item,index) in items" :key="index"
				@click="select(item)">{{item.name}}条/页</li>
		</ul>
	</div>
</template>

<script>
	import {
		addEventListener,
		removeEventListener,
		findOffsetTop,
	} from "../event.js"
	export default {
		// 组件名称
		name: 'zh-dropdown',
		// 组件参数 接收来自父组件的数据
		props: {
			// 列表项
			items: {
				required: true,
				type: Array,
				validator(value) {
					return (
						value.length &&
						value.every((item) => "name" in item && "value" in item)
					)
				}
			},
			// 选中项
			selectedValue: {
				type: Number,
				default: 0
			}
		},
		// 局部注册的组件
		components: {},
		// 组件状态值
		data() {
			return {
				// 是否显示
				show: false,
				// 选中的项
				selectedItem: {
					value: 1,
					name:4
				},
				direction: "",
			}
		},
		mounted() {
			const item = this.items.find((c) => c.value === this.selectedValue) || this.items[0];
			console.log(item)
			if (item) {
				this.selectItem = item;
			}
			this.setDirection();
			addEventListener(document, 'click', this.hide)
		},
		beforeDestroy() {
			removeEventListener(document, "click", this.hide);
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			hide(e) {
				this.show = false;
			},
			clicked() {
				this.show = !this.show;
				this.setDirection();
			},
			select(item) {
				this.selectedItem = item;
				this.show = false;
				this.$emit("selected", this.selectedItem)
			},
			// 设置方向
			setDirection() {
				// debugger
				const top = findOffsetTop(this.$refs.container.parentElement, 0) +
					this.$refs.container.offsetTop +
					this.$refs.container.offsetHeight +
					this.$refs.list.clientHeight +
					20 -
					document.documentElement.scrollTop;
				this.direction = top > document.documentElement.clientHeight ? "top" : "bottom";
				console.log(this.direction)
				console.log(top)
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	}
</script>

<style lang="scss" scoped>
	@import "../variable";

	.clicked {
		border: 1px solid $blue !important;
	}

	.top {
		top: -155px;
		transform-origin: 0 100%;
	}

	.bottom {
		top: 40px;
		transform-origin: 0 0;
	}

	.dropdown {
		position: relative;
		width: 100px;

		.select {
			width: 100px;
			padding: 5px;
			box-sizing: border-box;
			font-size: 13px;
			border: 1px solid #DCDFE6;
			border-radius: 3px;
			color: #606266;
			text-align: center;
			position: relative;
			line-height: 1;
			transition: all .3s;
			cursor: pointer;

			.icon {
				position: absolute;
				right: 5px;
				font-size: 14px;
				color: #C0C4CC;
				transition: transform .3s;
			}

			.icon[show] {
				transform: rotate(-180deg);
			}

			span {
				padding-right: 18px;
				cursor: pointer;
			}
		}

		.select:hover {
			border-color: $blue;
		}

		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			padding-top: 10px;
			padding-bottom: 10px;
			position: absolute;
			top: 35px;
			left: -4px;
			width: 110px;
			border: 1px solid #e4e7ed;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			cursor: pointer;
			background-color: #FFFFFF;
			box-sizing: border-box;
			border-radius: 4px;
			transform: scaleY(0);
			transition: transform 0.2s;
			transform-origin: 0 0;

			li {
				height: 34px;
				padding: 0 20px;
				font-size: 14px;
				box-sizing: border-box;
				line-height: 34px;
			}

			li:hover {
				background-color: #F5F7FA;
			}

			.selected {
				font-weight: 700;
				color: $blue;
			}

		}

		.shows {
			transform: scaleY(1);
		}

		ul::after {
			position: absolute;
			top: -11px;
			left: 35px;
			content: "";
			border-style: solid;
			border-color: transparent transparent #FFFFFF;
			border-width: 6px;
		}

		ul::before {
			position: absolute;
			top: -12px;
			left: 35px;
			content: "";
			border-style: solid;
			border-color: transparent transparent #e4e7ed;
			border-width: 6px;
		}
	}
</style>
